#!/usr/bin/env python
# -*- coding: utf-8 -*-
"""
@File    :   login.py
@Time    :   2024/08/25 08:11:20
@Author  :   Rico Chen 
@Mail    :   55059@qq.com
@Version :   1.0
@Desc    :   事件驱动的login界面
"""
from typing import Optional
from fastapi import Request
from fastapi.responses import RedirectResponse
from starlette.middleware.base import BaseHTTPMiddleware

from nicegui import app, ui
from utils import passwords


@ui.page("/login2")
def login1() -> Optional[RedirectResponse]:
    def try_lo2in() -> (
        None
    ):  # local function to avoid passing username and password as arguments
        if passwords.get(username.value) == password.value:
            app.storage.user.update({"username": username.value, "authenticated": True})
            ui.navigate.to(
                app.storage.user.get("referrer_path", "/")
            )  # go back to where the user wanted to go
        else:
            ui.notify("Wrong username or password", color="negative")

    if app.storage.user.get("authenticated", False):
        return RedirectResponse("/")
    # with ui.card().classes("absolute-center"):
    #     username = ui.input("Username").on("keydown.enter", try_login)
    #     password = ui.input("Password", password=True, password_toggle_button=True).on(
    #         "keydown.enter", try_login
    #     )
    #     ui.button("Log in", on_click=try_login)

    """
    UI界面部分
    """
    # log ui
    img = (
        ui.image(r"img/gg.png")
        .props("absolute-top text-center")
        .tailwind("h-screen mt-px")
    )

    with ui.label("").classes(
        "absolute top-1/4 inset-x-1/3 w-1/3 rounded bg-slate-300 shadow-2xl bg-white opacity-80"
    ):
        # 使用网格布局才能使text-center生效
        with ui.grid():
            label1 = ui.label("欢迎访问！").tailwind(
                "text-center text-2xl text-dark my-2"
            )
            # 发现一个问题，使用tailwind时无法获得控件的值,也就是说tailwind本身作为一个类仅仅起到修改控件
            # 样式的作用，而且使用后就覆盖了原本的类的自身函数,可以利用.element解决此问题
            # input1 = ui.input('账号/邮箱').tailwind('text-blue-700','px-10').element
            username = (
                ui.input("账号/邮箱")
                .props("outlined")
                .style(
                    "color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;"
                )
                .on("keydown.enter", try_login)
            )
            password = (
                ui.input("密码", password=True, password_toggle_button=True)
                .props("outlined")
                .style("padding-left: 2.5rem;padding-right: 2.5rem;")
                .on("keydown.enter", try_login)
            )
            #'gap:10em'是CSS中的一种属性值，用于设置元素之间的间距。它表示间距的大小为10个字符的宽度。
            # 这个属性通常用于布局调整，可以在水平或垂直方向上增加或减少元素之间的间距。
            with ui.row().style("gap:12em"):
                link1 = ui.link("忘记密码").tailwind("ml-10 w-1/3 text-left")
                link2 = ui.link("注册账号").tailwind("ml-9 text-right")
                # 单个空间用mx
            button1 = ui.button("登录", on_click=try_login).tailwind("mx-10 my-3")

    return None
